<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> el与data的两种写法 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>name = {{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    ///el 的两种写法
    // const v = new Vue({
    //     // el: "#root", 用另外一种方式替代  v.$mount('#root')
    //     data: {
    //         name: "阿斯达"
    //     },
    // })
    // console.log(v)///vue 示例对象   $开头的 是给程序员用的   其他没有$符号的是底层
    // // console.log()
    // v.$mount('#root')
    // setTimeout(() => {
    //     // 定时器
    // }, 1000);

    // data 的两种写法

    new Vue({
        el: '#root',
        data() {
            console.log('@@@', this)///还是vue对象  不能箭头函数 => 他没有this
            return {
                name: "函数"
            }
        }
    })
    // new Vue({
    //     el: '#root',
    //     // data:{}
    //     data: function () {
    //         console.log('@@@', this)///还是vue对象  不能箭头函数 => 他没有this
    //         return {
    //             name: "函数"
    //         }
    //     }
    // })
</script>

</html>